<template>
    <div class="ui grid form sp-delivery " :class="{'big loader':loadShow}">
        <div class="row " v-for="(item,index) in orderData" v-show='!loadShow'>
            <div class="three wide column">
                <span class="ui small header">订单号码:</span>
                <span>{{item.sp_order_num}}</span>
            </div>
            <div class="three wide column">
                <span class="ui small header">商品名称:</span>
                <span>{{item.pname}}</span>
            </div>
            <div class="three wide column" >
                <span class="ui small header">商品规格:</span>
                <span>{{item.attr_name}}</span>
            </div>
            <div class="three wide column">
                <span class="ui small header">商品数量:</span>
                <span>{{item.pnum}}</span>
            </div>
            <div class="four wide column">
                <a class="green pointer" @click.prevent.stop="spOrderDetail(index)" >{{item.showDetail?'收起':'订单详情'}}</a>
            </div>
            <div class="sixteen wide column" v-if="option.data.deliveryShow">
                <div class="inline field">
                    <div class="ui checkbox">
                        <input type="checkbox" v-model="item.sendMsg">
                        <label>发送短信</label>
                    </div>
                </div>
                <div class="field"  v-show="item.sendMsg">
                    <textarea rows="2" v-model="item.textMsg"></textarea>
                </div>
            </div>
			<div class="sixteen wide column" v-show='item.showDetail'>
				<spOrderDetail :id='item.id' :option='{data:{operateShow:false}}'></spOrderDetail>
			</div>
        </div>
        <div class="center-box" v-if="option.data.deliveryShow" v-show='!loadShow'>
            <button class="ui primary button" @click.prevent.stop="delivery">确认发货</button>
            <button class="ui button" @click.prevent.stop="hideMypop">取消</button>
        </div>
    </div>
</template>

<script>
    import loading from 'src/components/common/loading'
	import spOrderDetail from './spOrderDetail'

    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';
    export default {
		components:{loading,spOrderDetail},
        props:['id','option'],
        data(){
            return {
                orderData:[],
                sendMsg:false,
				loadShow:true,
            }
        },
        computed:{

        },
        watch: {
            id:function () {
                this.getOrderDetail()
            }
        },
        created(){
            this.getOrderDetail();
        },
        methods:{
            hideMypop(){
                this.$store.state.global.eventVue.$emit('hideMypop')
            },
            delivery(){
				this.loadShow= true;
                let url = tool.getApi(this, 'Op', 'send_out');
                let parm = {
                    order_id:this.orderData[0].order_id,
                    sp_id:this.orderData[0].sp_id,
                    ids:[],
                    remarks:[],
                };
                this.orderData.forEach(item =>{
                    if(item.sendMsg){
                        parm.ids = parm.ids.concat(item.id);
                        parm.remarks = parm.remarks.concat(item.textMsg)
                    }
                })
                util.http.SR(this,url,parm,'发货成功', (rs) => {
					this.loadShow= false;
                    this.hideMypop();
                    logic.list.refreshListData(this);
                });
            },
            spOrderDetail(index){
                /**
                 * 触发mypop.vue下showPopCom监听事件 显示spOrderDetail模板
                 * */
				 this.orderData.forEach((item,i)=>{
					 if(index!==i){
						 item.showDetail = false
					 }else{
						 item.showDetail=!item.showDetail
					 }
				 })

                //let url = tool.getApi(this,'Trodetail','read');
                //this.$store.state.global.eventVue.$emit('showPopCom',{_this:this, id:id,data:{url:url},name:'spOrderDetail'});
            },
            getOrderDetail(){
				this.loadShow = true
                util.http.getDataCom(this, tool.getApi(this, 'Trosp', 'read'), {id: this.id}, (rs) => {
                    let  data = rs;
                    let  dataArray = [];
                    delete data['fordebug'];
                    Object.keys(data).forEach(key=>{
                        let item = dataArray[key] = data[key];
                        item.sendMsg = false;
						item.showDetail = false;
                        item.textMsg = '';
                        util.http.getDataCom(this, tool.getApi(this, 'Get', 'get_sp_msgmodel'),{id:item.product_id},(rs)=>{
                            item.textMsg = rs
                        })
                    });

                    this.orderData = dataArray;
					this.loadShow= false
                })
            },
        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .sp-delivery{
        margin: 0!important;
        .row{
            margin: 10px 0;
            box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
            border-radius: 0em 0em 0.28571429rem 0.28571429rem;
            border: 1px solid rgba(34, 36, 38, 0.15);
        }
        .center-box{
            text-align: center;
            width: 100%;
        }
    }
</style>
